<template>
  <div class="edit_container">
      <!-- 导航栏 -->
     <van-nav-bar
  title="编辑资料"
  left-arrow
  @click-left="$router.go(-1)"
/>
<!-- 图片 -->
<div class="avatar">
  <van-image fit="cover" round :src="userInfo.photo" />
  <van-uploader :after-read="afterRead" />
</div>
<!-- 信息展示 -->
<van-cell-group>
  <van-cell is-link title="名称" :value="userInfo.name" @click="editName"/>
  <van-cell is-link title="性别" :value="userInfo.gender?'女':'男'" @click="showPopup=true"/>
  <van-cell is-link title="生日" :value="userInfo.birthday" @click="showDatePick=true;currentDate=new Date(userInfo.birthday)"/>
</van-cell-group>
<!-- 修改昵称的对话框 -->
<van-dialog
  v-model="showDialog"
  title="修改昵称"
  show-cancel-button
  @confirm="updateNickname"
>
  <van-field
    ref="input"
    placeholder="请输入昵称"
    v-model="newName"
  ></van-field>
</van-dialog>
<!-- 修改性别 -->
<van-popup v-model="showPopup" position="bottom">
  <van-nav-bar
    title="修改性别"
    left-text="取消"
    left-arrow
    @click-left="showPopup = false"
  >
  </van-nav-bar>
  <van-cell is-link title="男" @click="updateGender(0)" />
  <van-cell is-link title="女" @click="updateGender(1)" />
</van-popup>
<!-- 修改生日 -->
<van-popup position="bottom" v-model="showDatePick">
  <van-datetime-picker
    v-model="currentDate"
    type="date"
    title="选择年月日"
    :min-date="minDate"
    :max-date="maxDate"
    @cancel="showDatePick=false"
    @confirm="updateBirthday"
  />
</van-popup>
<div class="cropper" v-show="showCropper">
  <vueCropper
            ref="cropper"
            :img="img"
            autoCrop
            autoCropWidth='120'
            autoCropHeight='120'
  >
  </vueCropper>
  <van-button type="primary" @click="showCropper=false">取消</van-button>
  <van-button type="info" @click="updatePhoto">确认</van-button>
</div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {setUserInfo,setPhotoFile} from '../../API/login'
import *as moment from 'moment'
import {VueCropper} from 'vue-cropper'
export default {
name:"edit",
components:{
  VueCropper
},
data(){
    return{  
      showCropper:false,
      img:'',
showDialog:false,  // 编辑姓名
// 姓名输入框
newName:'',
// 性别
showPopup:false,
// 日期选择器
showDatePick:false,
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2030, 10, 1),
      currentDate: new Date(),
    }
},
computed:{
...mapState(['userInfo'])
},
methods:{
   updatePhoto(){
     this.$refs.cropper.getCropBlob(async data=>{
           let fd=new FormData()
      fd.append('photo',data)
     let res=await setPhotoFile(fd)
    //  console.log(res);
        this.$toast.success('修改成功')
        this.showCropper=false,
        this.$store.commit('updateUserInfo',{
        ...this.userInfo,
        photo:res.data.data.photo
        }
        )
     })
  },
   afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    this.img=file.content;
    this.showCropper=true
    },
    async updateBirthday(){
      let birthday=moment(this.currentDate).format('YYYY-MM-DD')
      // console.log(birthday);
      let res=await setUserInfo({birthday})
      // console.log(res);
      this.showDatePick=false
       this.$store.commit('updateUserInfo',{
        ...this.userInfo,
        birthday
        }
        )
        this.$toast.success('修改成功')

    },
 updateGender(gender){
     setUserInfo({gender}).then(res=>{
         this.$toast.success('修改成功')
         this.showPopup=false
         this.$store.commit('updateUserInfo',{
        ...this.userInfo,
        gender
        }
        )
     })
 },
updateNickname(){
    setUserInfo({name:this.newName}).then(res=>{
        this.$store.commit('updateUserInfo',{
        ...this.userInfo,
        name:this.newName
        }
        )
        this.$toast.success('修改成功')
    })
},
editName(){
this.showDialog=true
this.newName=this.userInfo.name
this.$nextTick(()=>{
    this.$refs.input.focus()
})
}
}
}
</script>

<style lang='less'>
.edit_container{
    .van-nav-bar {
  background-color: #3196fa;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-icon-arrow-left {
    color: #fff;
  }
}
.avatar {
  display: flex;
  height: 150px;
  justify-content: center;
  align-items: center;
  .van-uploader{
    opacity: 0;
    width: 120px;
    height: 120px;
    position: absolute;
    .van-uploader__upload{
      height: 120px;
      width: 120px;
    }
  }
  .van-image {
    width: 120px;
    height: 120px;
  }
}
.cropper{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  .van-button--primary{
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .van-button--info{
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
}
</style>